<template>
    <div>
        <div v-for="table in tableList" :key="table.id" class="table-item">
            <div>
                <p style="font-weight: bold;font-size: 14px">{{table.tableName}}</p>
                <p style="color: #808695">{{table.comments}}</p>
            </div>
            <div>
                <div class="table-item-right">
                    <div>
                        {{table.className}}PO
                    </div>
                    <div style="margin-left: 16px">
                        <Tooltip content="点击关闭CRUD" placement="top-end" v-if="table.isAutoCrud === '1'">
                            <Icon type="ios-checkmark-circle-outline" size="16" color="#19be6b" @click="activeTable(table, '0')"/>
                        </Tooltip>
                        <Tooltip content="点击打开CRUD" placement="top-end" v-else>
                            <Icon type="ios-close-circle-outline" size="16" color="#ed4014" @click="activeTable(table, '1')"/>
                        </Tooltip>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                tableList: [],
                params: {
                    filters: []
                }
            }
        },
        props: ['id', 'tableName'],
        created(){
            this.params.filters.push({
                field: 'dbId',
                operator: 'EQ',
                value: this.id
            });
            this.search(this.params);
        },
        methods:{
            search(params){
                this.$axios.post('/mdo/api/v1/appTable/pages', params).then(res => {
                    this.tableList = res.data.list;
                });
            },
            activeTable(table, activeFlag) {
                this.$axios({
                    url: '/mdo/api/v1/app/table/' + table.id,
                    method: 'put',
                    params:{
                        flag: activeFlag
                    }
                }).then((res) => {
                    if (res.status === 200 && res.data === 1) {
                        table.isAutoCrud = activeFlag;
                    }
                }).catch(e => {
                    this.$Message.error(e.response.data);
                });
            }
        },
        watch:{
            tableName:function (val) {
                this.params.filters = [];
                this.params.filters.push({
                    field: 'dbId',
                    operator: 'EQ',
                    value: this.id
                });
                this.params.filters.push({
                    field: 'tableName',
                    operator: 'LIKE',
                    value: val
                });
                this.search(this.params);
            }
        }
    }
</script>

<style lang="less" scoped>
    .table-item{
        padding: 8px 0;
        border-bottom: 1px solid @border-color-base;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 64px;
        &:first-child{
            margin-top: -16px;
        }
        &:last-child{
            border-bottom: none;
        }

        .table-item-right{
            display: flex;
            align-items: center;

            i{
                cursor: pointer;
            }
        }
    }
</style>